import { Input, message, Pagination, Popconfirm, Table, Tag } from "antd";
import Layout from "../Shared/Layout";
import MyButton from "../../Components/MyButton";
import AddRightConfig from "../../Components/Operation/RightConfig/AddRightConfig";
import { useCallback, useEffect, useState } from "react";
import { request } from "../../Api/api";

const RightConfig = () => {
  const [open, setOpen] = useState(false);
  const [rightConfigList, setRightConfigList] = useState([]);
  const [page, setPage] = useState({
    page: 1,
    limit: 5,
  });
  const [where, setWhere] = useState({
    key: "",
  });
  const [total, setTotal] = useState(0);
  const bind = useCallback(async () => {
    const res = await request(
      "/rightConfig/pagination",
      { ...page, ...where },
      "GET"
    );
    if (res.code >= 0) {
      setRightConfigList(res.data.data);
      setTotal(res.data.total);
    }
  }, [page, where]);
  useEffect(() => {
    const fetchData = async () => {
      await bind();
    };
    fetchData();
  }, [bind]);
  const toDetail = (id) => {
    window.location.href = `/right/rightConfig/Detail?id=${id}`;
  };
  const publish = async (id) => {
    const res = await request("/rightConfig/publish", { id }, "POST");
    if (res.code >= 0) {
      message.success(res.message);
      bind();
    } else {
      message.error(res.message);
    }
  };
  const cancelPublish = async (id) => {
    const res = await request("/rightConfig/cancelPublish", { id }, "POST");
    if (res.code >= 0) {
      message.success(res.message);
      bind();
    } else {
      message.error(res.message);
    }
  };
  const columns = [
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
      width: 100,
      ellipsis: true,
    },
    {
      title: "描述",
      dataIndex: "explain",
      key: "explain",
      width: 200,
      ellipsis: true,
    },
    {
      title: "职位",
      dataIndex: "jobNames",
      key: "jobNames",
      width: 150,
      ellipsis: true,
    },
    {
      title: "权限",
      dataIndex: "rightNames",
      key: "rightNames",
      width: 150,
      ellipsis: true,
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      render: (_, { createTime }) => {
        return <p>{new Date(createTime).toLocaleString()}</p>;
      },
      width: 150,
      ellipsis: true,
    },
    {
      title: "是否发布",
      dataIndex: "isPublish",
      key: "isPublish",
      render: (_, { isPublish }) => {
        return (
          <p>
            {isPublish ? (
              <Tag color="green">是</Tag>
            ) : (
              <Tag color="red">否</Tag>
            )}
          </p>
        );
      },
      width: 100,
      ellipsis: true,
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      render: (_, { id, isPublish }) => {
        return (
          <>
            <div className="extra">
              {isPublish ? null : (
                <div
                  className="extra-btn"
                  onClick={() => {
                    toDetail(id);
                  }}
                >
                  <MyButton type="primary">查看</MyButton>
                </div>
              )}
              {isPublish ? (
                <div className="extra-btn">
                  <MyButton
                    type="warning"
                    onClick={() => {
                      cancelPublish(id);
                    }}
                  >
                    停用
                  </MyButton>
                </div>
              ) : (
                <div className="extra-btn">
                  <MyButton
                    type="success"
                    onClick={() => {
                      publish(id);
                    }}
                  >
                    发布
                  </MyButton>
                </div>
              )}
              {!isPublish ? (
                <Popconfirm
                  okText="确认"
                  cancelText="取消"
                  title="确认删除?"
                  onConfirm={() => {
                    deleteRightConfig(id);
                  }}
                >
                  <div className="extra-btn">
                    <MyButton type="danger">删除</MyButton>
                  </div>
                </Popconfirm>
              ) : null}
            </div>
          </>
        );
      },
      fixed: "right",
    },
  ];
  const showAddModal = () => {
    setOpen(true);
  };
  const add = async (data) => {
    const res = await request("/rightConfig/add", data, "POST");
    if (res.code >= 0) {
      setOpen(false);
      message.success(res.message);
      await bind();
    } else {
      message.error(res.message);
    }
  };
  const deleteRightConfig = async (id) => {
    const res = await request("/rightConfig/delete", { id }, "POST");
    if (res.code >= 0) {
      message.success(res.message);
      await bind();
    } else {
      message.error(res.message);
    }
  };
  return (
    <Layout>
      <AddRightConfig
        open={open}
        onCancel={() => {
          setOpen(false);
        }}
        onOk={add}
      ></AddRightConfig>
      <div style={{ display: "flex", fontWeight: "700" }}>
        <div>权限配置列表</div>
        <div style={{ margin: "auto" }}>
          <Input
            value={where.key}
            onChange={(e) => setWhere({ ...where, key: e.target.value })}
            placeholder="搜索"
          ></Input>
        </div>
        <div style={{ marginLeft: "auto" }} onClick={showAddModal}>
          <MyButton type="success">添加</MyButton>
        </div>
      </div>
      <Table
        columns={columns}
        pagination={false}
        tableLayout="fixed"
        rowKey={(record) => record.id}
        sticky={true}
        key={"rightConfigList"}
        bordered={true}
        dataSource={rightConfigList}
      />
      <Pagination
        current={page.page}
        pageSize={page.limit}
        onChange={(pageNumber) => setPage({ ...page, page: pageNumber })}
        total={total}
      />
    </Layout>
  );
};

export default RightConfig;
